<template>
	<div style="margin-right: 30px;">
		<el-form label-width="90px" :rules="rules" ref="formObj" :model="complaintsform">
			 <el-form-item label="维修类别" prop="type">
			    <el-radio-group v-model="complaintsform.type">
			      <el-radio label="社区安全类"></el-radio>
			      <el-radio label="环境秩序类"></el-radio>
				    <el-radio label="邻里关系类"></el-radio>
				    <el-radio label="服务质量类"></el-radio>
				    <el-radio label="规则执行类"></el-radio>
				    <el-radio label="文化冲突类"></el-radio>

				  
				</el-radio-group>
				</el-form-item>
			  <el-form-item label="具体描述" prop="content">
			     <el-input 
				 type="textarea"  
				 v-model="complaintsform.content" 
				 placeholder="请对您不满意的地方进行一些具体描述"
				 :rows="6"
				 maxlength="60"
				 show-word-limit
				 ></el-input>
			   </el-form-item>
			
			 <el-form-item>
			    <el-button type="primary" @click="save()" plain>确定</el-button>
			    <el-button type="danger"  plain>重置</el-button>
			  </el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
	import { reactive,ref } from 'vue'
	import { getCookieForObject} from '@/util';
	import{_axios} from '@/plugins/axios'
	import { get, post } from '@/plugins/axios'
	const props = defineProps(['id'])
	const formObj = ref()
	 const emits = defineEmits(['update:show', 'getTableData'])
	const complaintsform=reactive({
		id:'',
		type:'',
		content:''
	})
	const rules = reactive({
			  content: [
			     { required: true, message: '请输入相关描述', trigger: 'blur' },],
			    type: [
			      {required: true,message: '请选择类型',trigger: 'change'},]
			  })

	function getUserId(){
	 const userinfo= getCookieForObject('user')
	    return userinfo.id
	}
	const userId=getUserId()
	function check (rules, value, callback) {
		get('/complaints/check', { id: props.id, value, field: rules.field }, content => {
			if (content) {
				callback()
			} else {
				callback(new Error())
			}
		})
	}
	function save()
	{
		formObj.value.validate(valid=>{
			if(valid){
				if(props.id)
				{
					post('/complaint/update',{id:props.id,type:complaintsform.type,content:complaintsform.content},content=>{
						emits('update:show',false)
						emits('getTableData')
					})
				}
				else{
					post('/complaint/add',{userId:userId,type:complaintsform.type,content:complaintsform.content},content=>{
						emits('update:show',false)
						emits('getTableData')
					})
				}
			}
			})
	}
	function getById () {
		get('/complaint/getById', { 'id': props.id }, content => {
			for (const key in complaintsform) {
				if (Object.prototype.hasOwnProperty.call(content, key)) {
					complaintsform[key] = content[key]
				}
			}
			console.dir(complaintsform)
		})
	}
		if (props.id)
		{
			complaintsform.id = props.id
			getById()
		}


</script>

<style scoped lang="scss">
</style>